<template lang="pug">
#liquid(@click.stop="rand")
</template>

<script lang="ts" setup>
import {Liquid} from '@antv/g2plot'
import {onMounted, ref} from 'vue'

const liquid = ref<Liquid>()

onMounted(() => {
  liquid.value = new Liquid('liquid', {
    percent: 0.25,
    // color: ['#F4664A', '#FAAD14', '#30BF78'],
    // colorField: 'type'
    // shape: 'pin',
    statistic: {
      title: {style: {fontSize: '20px'}, formatter: () => '222',offsetY:-20},
      content: {style: {fontSize: '20px'}}
    }
  })
  liquid.value.render()
})

const rand = () => liquid.value?.changeData(Math.random())

</script>

<!--suppress JSUnusedGlobalSymbols -->
<script lang="ts">
export default {
  name: 'Liquid'
}
</script>

<style lang="scss" scoped>
#liquid {
  height: 150px;
  width: 100%;
}
</style>
